<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="hezi.css" />
	</head>
	<body>
		<!-- 导航 -->
		<div class="nav">
			<span>home</span>
			<span>home</span>
			<span>home</span>
			<span>home</span>
			<span>home</span>
			<span>home</span>
			<span>home</span>
		</div>
		<div class="">
			图标
		</div>
		<!-- banner -->
		<div class="banner">
			<span>HANDLCRAFTS</span>
			<p>Lapeyrouse Adults trained the young in the
				knoledge and skils inFashion Elle
				Moscow,Russia Form
				<b>$50</b>
			</p>
		</div>
		<!-- products -->

		<!-- About -->
		<!-- our Team -->
		<style type="text/css">
			.servies{
				background-image: url(05盒子模型/banner.jpg);
				width: 100%;
				height: 400px;
			}
			.servies img{
				width: 50px;
				float: left;
			}
			.servies p{
				float: left;
				width: 90%;
			}
			.servies-font{
				width: 45%;
				float: left;
				/* 使元素在水平方向排列 */
				/* 特点：脱离文档流，不在页面占位置 */
			}
		</style>
		<!-- our servies -->
		<div class="servies">
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
			<div class="servies-font">
				<img src="css动画/img/pig.jpg">
				<p>Duis quis risus a nunc ulticies varius.Aeneanaliquam pellentesque magna
					consectetur hendrerit.Cum sociis natoque penatibus.</p>
			</div>
		</div>

	</body>
</html>
